<template>
   <div class="contact-footer">
       <div class="contact-footer-f">
          <div class="triangle_border_up">
         </div>
         <div class="handle-min"> 
             <img src="../assets/icon/footer-1.png"  class="handle-min-img"/>
             <span class="handle-min-text">公司管理</span>
                 <span class="handle-min-num">881</span>
             <span class="handle-min-amount">655,8&nbsp;&nbsp;个</span>
     </div>

          <ul class="handle-ul">
             <li class="handle-ul-li">
                 <span>销售入库单审核</span>
                 <span>0</span>
             </li>
             <li class="handle-ul-li">
                 <span>付款单审核</span>
                 <span>0</span>
             </li>
             <li class="handle-ul-li">
                 <span>采购入库单审核</span>
                 <span>6</span>
             </li>
             <li class="handle-ul-li">
                 <span>费用报销单审核</span>
                 <span>5</span>
             </li>
             <li class="handle-ul-li">
                 <span>采购订单审核</span>
                 <span>0</span>
             </li>
              <li class="handle-ul-li">
                 <span>财务报表审核</span>
                 <span>0</span>
             </li>
             
         </ul>
        </div>
       <div class="contact-footer-f right-f" >
           <div class="triangle_border_up">
           </div>
        
          <div class="handle-min"> 
             <img src="../assets/icon/footer-1.png"  class="handle-min-img"/>
             <span class="handle-min-text">公司管理</span>
             <span class="handle-min-num">881</span>
             <span class="handle-min-amount">655,8&nbsp;&nbsp;个</span>
         </div>

          <ul class="handle-ul">
             <li class="handle-ul-li">
                 <span>销售入库单审核</span>
                 <span>0</span>
             </li>
             <li class="handle-ul-li">
                 <span>付款单审核</span>
                 <span>0</span>
             </li>
             <li class="handle-ul-li">
                 <span>采购入库单审核</span>
                 <span>6</span>
             </li>
             <li class="handle-ul-li">
                 <span>费用报销单审核</span>
                 <span>5</span>
             </li>
             <li class="handle-ul-li">
                 <span>采购订单审核</span>
                 <span>0</span>
             </li>
              <li class="handle-ul-li">
                 <span>财务报表审核</span>
                 <span>0</span>
             </li>
             
         </ul>
       </div>
       <div class="contact-footer-f">
           <div class="triangle_border_up">
           </div>
          <div class="handle-min"> 
             <img src="../assets/icon/footer-1.png"  class="handle-min-img"/>
             <span class="handle-min-text">公司管理</span>
             <span class="handle-min-num">881</span>
             <span class="handle-min-amount">655,8&nbsp;&nbsp;个</span>
         </div>

          <ul class="handle-ul">
             <li class="handle-ul-li">
                 <span>销售入库单审核</span>
                 <span>0</span>
             </li>
             <li class="handle-ul-li">
                 <span>付款单审核</span>
                 <span>0</span>
             </li>
             <li class="handle-ul-li">
                 <span>采购入库单审核</span>
                 <span>6</span>
             </li>
             <li class="handle-ul-li">
                 <span>费用报销单审核</span>
                 <span>5</span>
             </li>
             <li class="handle-ul-li">
                 <span>采购订单审核</span>
                 <span>0</span>
             </li>
              <li class="handle-ul-li">
                 <span>财务报表审核</span>
                 <span>0</span>
             </li>
             
         </ul>
       </div>
    </div>
</template>

<script>
export default {
 
}
</script>

<style lang="scss" scoped>
    .contact{
      
        &-footer{
              height:24% ;
            //   border-bottom: 1px solid;
              width: 100%;
              display: flex;
              
              
               &-f{
                  width:34%;
                  background-color: #fefefe;
                //   border: 1px solid;
                  position: relative;
                height: 100%;
                 .triangle_border_up{
                      width: 0;
                      height: 0;
                      border-width: 0 25px 25px;
                      border-style: solid;
                      border-color: transparent transparent #79bf21;
                      margin: 40px auto;
                      transform: rotate(-45deg);
                      position: absolute;
                      top: -44px;
                      left: -16px;
                   }
               }
             .right-f{
                      margin: 0 15px;
                        
               }   
             
        }
    }
   .handle-min{
       height:24%;
    width: 100%;
    // border-bottom: 1px solid;
    justify-content: center;
    display: flex;
    
    margin-top:  7%;
    &-img{
    width: 4%;
    height: 43.3%;
    }
    &-text{
     color: #555150;
    font-size: 13px;
    margin-left: 2%;
    margin-top: 1%;
    }
    &-num{
    color: #e68828;
    font-size: 20px;
    margin-left: 4%;
    margin-right: 19%;
    }
    &-amount{
        font-size: 13px;
        color: #4d4946;
        margin-top: 5px;
        font-weight:700;
    }
   }
.handle-ul{
    height: 37%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top:2%;
    margin-left: 8%;
    &-li{
        width:39%;
        font-size: 14px;
        color: #291c18;
        font-weight:800;
    }
}
 @media screen and (max-width:1070px){
.handle-ul-li{font-size: 12px !important;}
}
</style>


